<template>
  <div class="china-map-container">
    <div class="map-controls">
      <el-select v-model="currentLevel" @change="handleLevelChange" placeholder="选择地图层���">
        <el-option label="全国" value="china" />
        <el-option label="省份" value="province" />
        <el-option label="城市" value="city" />
      </el-select>

      <el-select v-if="currentLevel !== 'china'" v-model="selectedRegion" @change="handleRegionChange" placeholder="选择区域">
        <el-option
          v-for="region in currentRegions"
          :key="region.value"
          :label="region.label"
          :value="region.value"
        />
      </el-select>

      <el-button @click="resetMap">重置</el-button>
      <el-button @click="clearConnections" type="warning">清除连接</el-button>
    </div>

    <div ref="mapContainer" class="map-wrapper"></div>

    <div class="map-legend">
      <div class="legend-title">人口分布（万人）</div>
      <div class="legend-items">
        <div class="legend-item" v-for="(item, index) in legendData" :key="index">
          <div class="legend-color" :style="{ backgroundColor: item.color }"></div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>

    <div class="map-info">
      <div class="info-title">统计信息</div>
      <div class="info-content">
        <div class="info-item">
          <span class="info-label">当前区域：</span>
          <span class="info-value">{{ currentRegionName }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">总人口：</span>
          <span class="info-value">{{ formatNumber(totalPopulation) }} 万人</span>
        </div>
        <div class="info-item">
          <span class="info-label">平均人口：</span>
          <span class="info-value">{{ formatNumber(averagePopulation) }} 万人</span>
        </div>
        <div class="info-item" v-if="selectedProvinces.length > 0">
          <span class="info-label">已选省份：</span>
          <span class="info-value">{{ selectedProvinces.map(p => p.name).join(', ') }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import * as echarts from 'echarts'

const mapContainer = ref(null)
let chart = null

const currentLevel = ref('china')
const selectedRegion = ref('')
const mapData = ref([])
const currentRegions = ref([])
const totalPopulation = ref(0)
const averagePopulation = ref(0)
const chinaMapData = ref(null)
const selectedProvinces = ref([])
const connections = ref([])

// 确保数组初始化
if (!Array.isArray(selectedProvinces.value)) {
  selectedProvinces.value = []
}
if (!Array.isArray(connections.value)) {
  connections.value = []
}
let planeAnimation = null

// 优化后的颜色方案
const legendData = [
  { min: 0, max: 500, color: '#E8F4FD', label: '0-500' },
  { min: 500, max: 1000, color: '#B8E0F7', label: '500-1000' },
  { min: 1000, max: 2000, color: '#7BC2F1', label: '1000-2000' },
  { min: 2000, max: 5000, color: '#2E9EE5', label: '2000-5000' },
  { min: 5000, max: Infinity, color: '#1565C0', label: '5000+' }
]

// 当前区域名称
const currentRegionName = computed(() => {
  if (currentLevel.value === 'china') return '全国'
  const region = currentRegions.value.find(r => r.value === selectedRegion.value)
  return region ? region.label : ''
})

// 省份数据
const provinceData = [
  { name: '北京', value: 2189, adcode: '110000' },
  { name: '天津', value: 1386, adcode: '120000' },
  { name: '河北', value: 7556, adcode: '130000' },
  { name: '山西', value: 3718, adcode: '140000' },
  { name: '内蒙古', value: 2520, adcode: '150000' },
  { name: '辽宁', value: 4359, adcode: '210000' },
  { name: '吉林', value: 2407, adcode: '220000' },
  { name: '黑龙江', value: 3773, adcode: '230000' },
  { name: '上海', value: 2487, adcode: '310000' },
  { name: '江苏', value: 8505, adcode: '320000' },
  { name: '浙江', value: 6540, adcode: '330000' },
  { name: '安徽', value: 6127, adcode: '340000' },
  { name: '福建', value: 4188, adcode: '350000' },
  { name: '江西', value: 4519, adcode: '360000' },
  { name: '山东', value: 10170, adcode: '370000' },
  { name: '河南', value: 9883, adcode: '410000' },
  { name: '湖北', value: 5927, adcode: '420000' },
  { name: '湖南', value: 6644, adcode: '430000' },
  { name: '广东', value: 12684, adcode: '440000' },
  { name: '广西', value: 5037, adcode: '450000' },
  { name: '海南', value: 1008, adcode: '460000' },
  { name: '重庆', value: 3205, adcode: '500000' },
  { name: '四川', value: 8375, adcode: '510000' },
  { name: '贵州', value: 3856, adcode: '520000' },
  { name: '云南', value: 4721, adcode: '530000' },
  { name: '西藏', value: 365, adcode: '540000' },
  { name: '陕西', value: 3954, adcode: '610000' },
  { name: '甘肃', value: 2502, adcode: '620000' },
  { name: '青海', value: 594, adcode: '630000' },
  { name: '宁夏', value: 728, adcode: '640000' },
  { name: '新疆', value: 2585, adcode: '650000' }
]

// 城市数据（示例：广东省）
const cityData = {
  '440000': [
    { name: '广州市', value: 1881, adcode: '440100' },
    { name: '深圳市', value: 1756, adcode: '440300' },
    { name: '珠海市', value: 246, adcode: '440400' },
    { name: '汕头市', value: 555, adcode: '440500' },
    { name: '佛山市', value: 955, adcode: '440600' },
    { name: '韶关市', value: 286, adcode: '440200' },
    { name: '湛江市', value: 703, adcode: '440800' },
    { name: '肇庆市', value: 412, adcode: '441200' },
    { name: '江门市', value: 482, adcode: '440700' },
    { name: '茂名市', value: 621, adcode: '440900' },
    { name: '惠州市', value: 606, adcode: '441300' },
    { name: '梅州市', value: 387, adcode: '441400' },
    { name: '汕尾市', value: 307, adcode: '441500' },
    { name: '河源市', value: 284, adcode: '441600' },
    { name: '阳江市', value: 262, adcode: '441700' },
    { name: '清远市', value: 398, adcode: '441800' },
    { name: '东莞市', value: 1047, adcode: '441900' },
    { name: '中山市', value: 446, adcode: '442000' },
    { name: '潮州市', value: 257, adcode: '445100' },
    { name: '揭阳市', value: 562, adcode: '445200' },
    { name: '云浮市', value: 242, adcode: '445300' }
  ]
}

// 格式化数字
const formatNumber = (num) => {
  return num.toLocaleString()
}

// 省份坐标 - 包含完整省份名称
const provinceCoordinates = {
  '北京': [116.4, 39.9],
  '北京': [116.4, 39.9],
  '天津市': [117.2, 39.1],
  '天津': [117.2, 39.1],
  '河北省': [114.5, 38.0],
  '河北': [114.5, 38.0],
  '山西省': [112.5, 37.8],
  '山西': [112.5, 37.8],
  '内蒙古自治区': [111.7, 40.8],
  '内蒙古': [111.7, 40.8],
  '辽宁省': [123.4, 41.8],
  '辽宁': [123.4, 41.8],
  '吉林省': [125.3, 43.8],
  '吉林': [125.3, 43.8],
  '黑龙江省': [126.6, 45.7],
  '黑龙江': [126.6, 45.7],
  '上海': [121.4, 31.2],
  '上海市': [121.4, 31.2],
  '江苏省': [118.7, 32.0],
  '江苏': [118.7, 32.0],
  '浙江省': [120.1, 30.2],
  '浙江': [120.1, 30.2],
  '安徽省': [117.2, 31.8],
  '安徽': [117.2, 31.8],
  '福建省': [119.3, 26.0],
  '福建': [119.3, 26.0],
  '江西省': [115.8, 28.6],
  '江西': [115.8, 28.6],
  '山东省': [117.0, 36.6],
  '山东': [117.0, 36.6],
  '河南省': [113.6, 34.7],
  '河南': [113.6, 34.7],
  '湖北省': [114.3, 30.5],
  '湖北': [114.3, 30.5],
  '湖南省': [112.9, 28.2],
  '湖南': [112.9, 28.2],
  '广东省': [113.2, 23.1],
  '广东': [113.2, 23.1],
  '广西壮族自治区': [108.3, 22.8],
  '广西': [108.3, 22.8],
  '海南省': [110.3, 20.0],
  '海南': [110.3, 20.0],
  '重庆': [106.5, 29.5],
  '重庆市': [106.5, 29.5],
  '四川省': [104.0, 30.6],
  '四川': [104.0, 30.6],
  '贵州省': [106.7, 26.5],
  '贵州': [106.7, 26.5],
  '云南省': [102.7, 25.0],
  '云南': [102.7, 25.0],
  '西藏自治区': [91.1, 29.6],
  '西藏': [91.1, 29.6],
  '陕西省': [108.9, 34.2],
  '陕西': [108.9, 34.2],
  '甘肃省': [103.8, 36.0],
  '甘肃': [103.8, 36.0],
  '青海省': [101.7, 36.6],
  '青海': [101.7, 36.6],
  '宁夏回族自治区': [106.2, 38.4],
  '宁夏': [106.2, 38.4],
  '新疆维吾尔自治区': [87.6, 43.8],
  '新疆': [87.6, 43.8]
}

// 加载地图数据
const loadMapData = async () => {
  try {
    const response = await fetch('/china.json')
    const data = await response.json()
    chinaMapData.value = data
    echarts.registerMap('china', data)
    initMap()
  } catch (error) {
    console.error('加载地图数据失败:', error)
    initScatterMap()
  }
}

// 初始化地图
const initMap = () => {
  if (!mapContainer.value) return

  chart = echarts.init(mapContainer.value)
  updateMapData()

  window.addEventListener('resize', handleResize)
}

// 备用的散点图方案
const initScatterMap = () => {
  if (!mapContainer.value) return

  chart = echarts.init(mapContainer.value)
  updateScatterMapData()

  window.addEventListener('resize', handleResize)
}

// 更新地图数据
const updateMapData = () => {
  if (!chart) return

  let data = []

  switch (currentLevel.value) {
    case 'china':
      data = provinceData.map(item => ({
        name: item.name,
        value: item.value,
        adcode: item.adcode
      }))
      currentRegions.value = provinceData.map(item => ({
        label: item.name,
        value: item.adcode
      }))
      break
    case 'province':
      if (selectedRegion.value && cityData[selectedRegion.value]) {
        data = cityData[selectedRegion.value].map(item => ({
          name: item.name,
          value: item.value,
          adcode: item.adcode
        }))
        currentRegions.value = cityData[selectedRegion.value].map(item => ({
          label: item.name,
          value: item.adcode
        }))
      }
      break
    case 'city':
      break
  }

  mapData.value = data
  totalPopulation.value = data.reduce((sum, item) => sum + item.value, 0)
  averagePopulation.value = data.length > 0 ? Math.round(totalPopulation.value / data.length) : 0

  // 构建系列数据
  const series = [
    {
      name: '人口分布',
      type: 'map',
      map: 'china',
      roam: true,
      zoom: 1.2,
      label: {
        show: true,
        fontSize: 11,
        color: '#333',
        fontWeight: 'bold',
        formatter: (params) => {
          return `${params.name}\n${params.value}万人`
        }
      },
      emphasis: {
        label: {
          fontSize: 13,
          color: '#fff',
          fontWeight: 'bold'
        },
        itemStyle: {
          areaColor: '#FF6B35'
        }
      },
      data: data,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1.5
      },
      select: {
        label: {
          color: '#fff',
          fontSize: 13,
          fontWeight: 'bold'
        },
        itemStyle: {
          areaColor: '#FF6B35'
        }
      }
    }
  ]

  // 添加连接线系列
  if (connections.value.length > 0) {
    console.log('添加连接线系列，连接数:', connections.value.length)
    connections.value.forEach((conn, index) => {
      console.log(`添加连接线 ${index}:`, conn)
      series.push({
        name: `连接线${index}`,
        type: 'lines',
        zlevel: 2,
        coordinateSystem: 'geo',
        effect: {
          show: true,
          period: 6,
          trailLength: 0.7,
          color: '#FF6B35',
          symbolSize: 8,
          symbol: 'circle'  // 简化为圆形
        },
        lineStyle: {
          width: 3,
          opacity: 0.8,
          curveness: 0.2,
          color: '#FF6B35'
        },
        data: [{
          coords: conn.coords,
          fromName: conn.fromName,
          toName: conn.toName
        }]
      })
    })
  }

  // 添加选中省份标记
  if (selectedProvinces.value.length > 0) {
    console.log('添加选中省份标记，数组长度:', selectedProvinces.value.length)
    series.push({
      name: '选中省份',
      type: 'scatter',
      coordinateSystem: 'geo',
      data: selectedProvinces.value.map(p => {
        console.log('处理选中省份:', p.name)
        console.log('坐标:', provinceCoordinates[p.name])

        if (!provinceCoordinates[p.name]) {
          console.error('未找到省份坐标:', p.name)
          // 返回一个默认坐标
          return {
            name: p.name,
            value: [110, 35, p.value], // 默认坐标
            itemStyle: {
              color: '#FF6B35',
              borderColor: '#fff',
              borderWidth: 3
            }
          }
        }

        return {
          name: p.name,
          value: [...provinceCoordinates[p.name], p.value],
          itemStyle: {
            color: '#FF6B35',
            borderColor: '#fff',
            borderWidth: 3
          }
        }
      }),
      symbolSize: 15,
      zlevel: 3
    })
  }

  const option = {
    backgroundColor: '#F0F8FF',
    title: {
      text: getMapTitle(),
      left: 'center',
      top: 20,
      textStyle: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#1565C0'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.seriesType === 'map') {
          return `${params.name}<br/>人口：${formatNumber(params.value)} 万人<br/>点击选择省份进行连接`
        } else if (params.seriesType === 'scatter') {
          return `${params.name}<br/>人口：${formatNumber(params.data.value[2])} 万人`
        }
        return `${params.name}`
      }
    },
    visualMap: {
      type: 'piecewise',
      pieces: legendData.map(item => ({
        min: item.min,
        max: item.max === Infinity ? null : item.max,
        label: item.label,
        color: item.color
      })),
      orient: 'vertical',
      right: 20,
      bottom: 50,
      textStyle: {
        color: '#333',
        fontWeight: 'bold'
      }
    },
    geo: {
      map: 'china',
      roam: true,
      zoom: 1.2,
      itemStyle: {
        areaColor: '#E8F4FD',
        borderColor: '#fff',
        borderWidth: 1.5
      },
      emphasis: {
        itemStyle: {
          areaColor: '#7BC2F1'
        }
      }
    },
    series: series
  }

  chart.setOption(option)

  // 点击事件
  chart.off('click')
  chart.on('click', (params) => {
    console.log('点击事件触发:', params)
    if (params.seriesType === 'map' && params.data) {
      handleProvinceClick(params.data)
    } else if (params.seriesType === 'scatter' && params.data) {
      // 处理散点图模式的点击
      handleProvinceClick({
        name: params.data[3],
        value: params.data[2],
        adcode: params.data[4]
      })
    }
  })
}

// 处理省份点击
const handleProvinceClick = (provinceData) => {
  console.log('处理省份点击:', provinceData)
  console.log('selectedProvinces 类型:', typeof selectedProvinces.value)
  console.log('selectedProvinces 是否为数组:', Array.isArray(selectedProvinces.value))
  console.log('selectedProvinces 当前值:', selectedProvinces.value)

  // 确保数组存在
  if (!Array.isArray(selectedProvinces.value)) {
    selectedProvinces.value = []
  }

  // 检查是否已选中
  const existingIndex = selectedProvinces.value.findIndex(p => p.adcode === provinceData.adcode)

  if (existingIndex !== -1) {
    // 如果已选中，取消选中
    console.log('取消选中省份:', provinceData.name)
    selectedProvinces.value.splice(existingIndex, 1)
  } else {
    // 添加到选中列表
    console.log('选中省份:', provinceData.name)
    selectedProvinces.value.push(provinceData)

    // 如果有两个选中省份，创建连接
    if (selectedProvinces.value.length === 2) {
      console.log('创建连接:', selectedProvinces.value[0].name, '->', selectedProvinces.value[1].name)
      createConnection(selectedProvinces.value[0], selectedProvinces.value[1])
    }
  }

  updateMapData()
}

// 创建连接
const createConnection = (province1, province2) => {
  const coords1 = provinceCoordinates[province1.name]
  const coords2 = provinceCoordinates[province2.name]

  console.log('连接坐标:', province1.name, coords1, '->', province2.name, coords2)

  if (coords1 && coords2) {
    connections.value.push({
      fromName: province1.name,
      toName: province2.name,
      coords: [coords1, coords2]
    })

    console.log('连接已创建，当前连接数:', connections.value.length)

    // 清空选中省份，准备下一次连接
    selectedProvinces.value = []
  } else {
    console.error('无法获取省份坐标', coords1, coords2)
  }
}

// 清除连接
const clearConnections = () => {
  connections.value = []
  selectedProvinces.value = []
  updateMapData()
}

// 备用散点图数据更新
const updateScatterMapData = () => {
  if (!chart) return

  let data = []

  switch (currentLevel.value) {
    case 'china':
      data = provinceData.map(item => ({
        name: item.name,
        value: item.value,
        adcode: item.adcode
      }))
      currentRegions.value = provinceData.map(item => ({
        label: item.name,
        value: item.adcode
      }))
      break
    case 'province':
      if (selectedRegion.value && cityData[selectedRegion.value]) {
        data = cityData[selectedRegion.value].map(item => ({
          name: item.name,
          value: item.value,
          adcode: item.adcode
        }))
        currentRegions.value = cityData[selectedRegion.value].map(item => ({
          label: item.name,
          value: item.adcode
        }))
      }
      break
    case 'city':
      break
  }

  mapData.value = data
  totalPopulation.value = data.reduce((sum, item) => sum + item.value, 0)
  averagePopulation.value = data.length > 0 ? Math.round(totalPopulation.value / data.length) : 0

  const option = {
    backgroundColor: '#F0F8FF',
    title: {
      text: getMapTitle(),
      left: 'center',
      top: 20,
      textStyle: {
        fontSize: 22,
        fontWeight: 'bold',
        color: '#1565C0'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        if (params.data) {
          return `${params.name}<br/>人口：${formatNumber(params.data.value)} 万人`
        }
        return `${params.name}<br/>暂无数据`
      }
    },
    visualMap: {
      type: 'piecewise',
      pieces: legendData.map(item => ({
        min: item.min,
        max: item.max === Infinity ? null : item.max,
        label: item.label,
        color: item.color
      })),
      orient: 'vertical',
      right: 20,
      bottom: 50,
      textStyle: {
        color: '#333',
        fontWeight: 'bold'
      }
    },
    xAxis: {
      type: 'value',
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    series: [
      {
        name: '人口分布',
        type: 'scatter',
        symbolSize: (data) => {
          return Math.sqrt(data[2]) / 5 + 15
        },
        itemStyle: {
          color: (params) => {
            return getColorByValue(params.data[2])
          },
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'top',
          formatter: (params) => {
            return `${params.name}\n${params.data[2]}万人`
          },
          fontSize: 10,
          color: '#333',
          fontWeight: 'bold'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(21, 101, 192, 0.4)'
          }
        },
        data: data.map(item => {
          const coords = provinceCoordinates[item.name] || [110, 35]
          return [coords[0], coords[1], item.value, item.name, item.adcode]
        })
      }
    ]
  }

  chart.setOption(option)

  chart.off('click')
  chart.on('click', (params) => {
    if (params.data) {
      handleProvinceClick({
        name: params.data[3],
        value: params.data[2],
        adcode: params.data[4]
      })
    }
  })
}

// 根据数值获取颜色
const getColorByValue = (value) => {
  for (const item of legendData) {
    if (value >= item.min && value < item.max) {
      return item.color
    }
  }
  return legendData[legendData.length - 1].color
}

// 获取地图标题
const getMapTitle = () => {
  switch (currentLevel.value) {
    case 'china':
      return '中国人口分布地图'
    case 'province':
      return `${currentRegionName.value}人口分布图`
    case 'city':
      return `${currentRegionName.value}人口分布图`
    default:
      return '人口分布图'
  }
}

// 处理层级变化
const handleLevelChange = () => {
  if (currentLevel.value === 'china') {
    selectedRegion.value = ''
    clearConnections()
  }

  if (chinaMapData.value) {
    updateMapData()
  } else {
    updateScatterMapData()
  }
}

// 处理区域变化
const handleRegionChange = () => {
  if (chinaMapData.value) {
    updateMapData()
  } else {
    updateScatterMapData()
  }
}

// 重置地图
const resetMap = () => {
  currentLevel.value = 'china'
  selectedRegion.value = ''
  clearConnections()

  if (chinaMapData.value) {
    updateMapData()
  } else {
    updateScatterMapData()
  }
}

// 处理窗口大小变化
const handleResize = () => {
  if (chart) {
    chart.resize()
  }
}

// 组件挂载时初始化
onMounted(() => {
  loadMapData()
})

// 组件卸载前清理
onBeforeUnmount(() => {
  if (chart) {
    chart.dispose()
  }
  if (planeAnimation) {
    cancelAnimationFrame(planeAnimation)
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.china-map-container {
  width: 100%;
  height: 100vh;
  position: relative;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  overflow: hidden;
}

.china-map-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 20%, rgba(255, 218, 185, 0.3) 0%, transparent 50%);
  pointer-events: none;
}

.map-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 15px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.map-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.map-legend {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000;
  min-width: 180px;
}

.legend-title {
  font-weight: bold;
  margin-bottom: 15px;
  color: #1565C0;
  font-size: 14px;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
}

.legend-color {
  width: 24px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.map-info {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000;
  min-width: 240px;
  max-width: 300px;
}

.info-title {
  font-weight: bold;
  margin-bottom: 15px;
  color: #1565C0;
  font-size: 14px;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #666;
  font-size: 13px;
  font-weight: 500;
  flex-shrink: 0;
  margin-right: 10px;
}

.info-value {
  color: #1565C0;
  font-weight: bold;
  font-size: 13px;
  text-align: right;
  word-break: break-all;
}

/* 按钮样式优化 */
:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
  transition: all 0.3s ease;
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

:deep(.el-select) {
  border-radius: 8px;
}

:deep(.el-select .el-input__wrapper) {
  border-radius: 8px;
  transition: all 0.3s ease;
}

:deep(.el-select:hover .el-input__wrapper) {
  box-shadow: 0 2px 8px rgba(21, 101, 192, 0.2);
}
</style>